<template>
    <div class="tab-bar-item" @click="itemClick" >
        <div v-if='!isActive'><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <div  :style='activeStyle'><slot name="item-text"></slot></div>
    </div>
</template>

<script>
export default {
    name:'tabbaritem',
    props:{
        path:{
            type:String
        },
        activeColor:{
            type:String,
            default:'red'
        }
    },
    computed:{
        isActive(){
            return this.$route.path.indexOf(this.path) !== -1
        },
        activeStyle(){
            return this.isActive?{color:this.activeColor}:{}
        }
    },
    methods:{
        itemClick(){
            this.$router.push(this.path).catch(err =>err)
        }
    }
}
</script>

<style>

.tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 15px;
    margin-top: 3px;
}
.tab-bar-item img {
    width: 24px;
    height: 24px;
} 


</style>